<template>
  <nav class="pl-4 bg-[#6b0aab4f] h-12 flex align-center ">
    <button
      class="expand-button text-[#ececeb] transition-colors duration-300 hover:text-[#657691] hover:bg-[#233550a9] font-medium rounded-full text-sm block w-8 h-8 my-auto mr-2 pl-1"
      type="button" @click="drawer = true">
      <svg class="expand-icon w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 1024 1024">
        <path xmlns="http://www.w3.org/2000/svg"
          d="M844.12109375 214.68359375H170.19335937v79.28613281h673.92773438v-79.28613281zM606.28027344 452.53320312H170.19335937v79.28613282h436.08691407v-79.28613282zM170.19335937 809.31640625h673.92773438v-79.28613281H170.19335937v79.28613281z m515.390625-158.56347656l168.22265625-146.68945313-168.22265625-130.81640625v277.50585938z"
          p-id="6663" />
      </svg>
    </button>
    <span class="leading-[48px] text-white text-3xl blog-font-en truncate cursor-pointer mix-blend-lighten">TheKitten's
      Blog</span>
    <div class="flex-grow"></div>
    <div class="mr-2">
      <!-- search响应式 -->
      <div class=" flex items-center h-12 md:order-2">

        <IndexSearch @expand="handleExpand"></IndexSearch>
        <!-- 登录 -->
        <div @click="$router.push('/login')" v-if="!isLogin"
          class="text-white text-nowrap blog-font-cute text-xl ml-4 mr-6 transition-colors duration-300 hover:text-blue-600 cursor-pointer">
          登录</div>
        <!-- 已经登录，展示用户头像 -->
        <div v-else class="logInOut mr-6 flex align-middle relative" @mouseenter="showToLog" @mouseleave="hideToLog">
          <button
            class="text-white ml-2 min-w-[32px] focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm text-center inline-flex items-center"
            type="button">
            <!-- 用户登录头像 -->
            <img class="w-[32px] h-[32px] rounded-full" src="@/assets/img/default_avatar.jpg" alt="user photo">
          </button>
          <div
            class=" opacity-0 invisible transition-opacity duration-300 absolute top-[36px] left-[-30px] rounded-lg bg-[#9a8da3ce]"
            :class="{ showLog: logInOut }" ref="dropdownLog">
            <div class="w-[25px] h-[20px] absolute top-[-20px] left-[40px]"></div>
            <ul class="space-y-2 font-medium rounded-lg side-ul">
              <li>
                <a
                  class="flex transition-all duration-300 items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-300  group">
                  <svg t="1731834629746" class="icon w-4 h-4" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5822">
                    <path
                      d="M232.727 139.636h558.546a93.09 93.09 0 0 1 93.09 93.091v372.364a93.09 93.09 0 0 1-93.09 93.09H232.727a93.09 93.09 0 0 1-93.09-93.09V232.727a93.09 93.09 0 0 1 93.09-93.09z m0 46.546a46.545 46.545 0 0 0-46.545 46.545v372.364a46.545 46.545 0 0 0 46.545 46.545h558.546a46.545 46.545 0 0 0 46.545-46.545V232.727a46.545 46.545 0 0 0-46.545-46.545H232.727z m256 512h46.546v139.636h-46.546V698.182zM279.273 837.818h465.454a23.273 23.273 0 0 1 0 46.546H279.273a23.273 23.273 0 0 1 0-46.546z"
                      fill="#21A3DD" p-id="5823"></path>
                  </svg>
                  <span @click="$router.push('/admin')" class="ms-3 blog-font-cute text-[14px] text-nowrap">进入后台</span>
                </a>
              </li>
              <li>
                <a
                  class="flex transition-all duration-300 items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-300  group">
                  <svg t="1731835076163" class="icon w-4 h-4" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="6818">
                    <path
                      d="M402.07044078 882.49885516c-21.62350671 0-39.26055687-17.51624845-39.26055688-39.26055688 0-21.62350671 17.51624845-39.26055687 39.26055688-39.26055685l392.48476698-0.24160346c21.62350671 0 39.26055687 17.51624845 39.26055688 39.26055691s-17.51624845 39.26055687-39.26055688 39.26055688l-392.48476698 0.2416034zM51.02066147 871.50589922c-21.74430842 0-39.38135858-17.63705018-39.38135859-39.38135859l0.48320684-756.58113133c0-34.79089349 28.50920437-63.05849441 63.66250299-63.05849441h738.09846922c21.74430842 0 39.38135858 17.63705018 39.38135855 39.38135857s-17.63705018 39.38135858-39.38135855 39.38135859H90.8852269L90.40202004 832.12454063c0 21.74430842-17.63705018 39.38135858-39.38135857 39.38135859zM796.48803517 691.02813934c-13.4089902 0-26.93878209-5.07367198-37.20692773-15.34181761-20.53629129-20.53629129-20.53629129-53.75676249 0-74.29305379L903.3975516 457.15602207 759.28110744 313.16037965c-20.53629129-20.53629129-20.53629129-53.75676249 0-74.29305376s53.75676249-20.53629129 74.29305379 0l151.36454692 151.36454695c17.87865358 17.87865358 27.78439412 41.55578942 27.90519583 66.92414923 0 25.36835981-9.78493878 49.28709908-27.78439411 67.28655442L833.69496294 675.68632173c-10.26814563 10.26814563-23.79793753 15.34181761-37.20692777 15.34181761z"
                      p-id="6819" fill="#1296db"></path>
                    <path
                      d="M936.49722107 496.53738067H558.62946139c-29.11321292 0-52.66954708-23.55633412-52.66954706-52.66954704s23.55633412-52.66954708 52.66954706-52.66954708h377.98856141c29.11321292 0 52.66954708 23.55633412 52.66954705 52.66954708-0.1208017 28.99241121-23.67713585 52.66954708-52.79034878 52.66954704zM52.95348888 33.74601647l389.94793104 153.05577093c12.32177476 4.83206854 20.29468787 15.46261933 20.29468785 27.30118724l3.98645654 770.59413009c0.1208017 21.74430842-25.48916154 36.36131574-48.32068537 27.66359239L25.53149992 861.84176215"
                      p-id="6820" fill="#1296db"></path>
                  </svg>
                  <span class="ms-3 blog-font-cute text-[14px] text-nowrap" @click="logOut">退出登录</span>
                </a>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </nav>

  <!-- Drawer -->
  <el-drawer class="opacity-90" v-model="drawer" size="300" :direction="direction" :with-header="false"
    :show-close="false">
    <div class="py-4 overflow-y-auto">
      <div class="header flex flex-col items-center">
        <div class="avatar w-[100px] h-[100px] rounded-full  overflow-hidden">
          <img class="hover:scale-110 transition-all duration-300"
            src="https://anime-kitten.oss-cn-beijing.aliyuncs.com/avatarIndex_self.jpg" />
        </div>
        <!-- homePage -->
        <div class="blog w-28 h-8 mt-2 flex  items-center justify-around">
          <a v-if="blogSettingsStore.blogSettings.bilibiliHomepage"
            :href="blogSettingsStore.blogSettings.bilibiliHomepage">
            <svg t="1731897822048" class="icon w-5 h-5" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="5476">
              <path
                d="M899.982222 233.585778c0-60.512711-49.055289-109.568-109.568-109.568H233.585778c-60.512711 0-109.568 49.055289-109.568 109.568v556.828444c0 60.513849 49.055289 109.568 109.568 109.568h556.828444c60.512711 0 109.568-49.054151 109.568-109.568V233.585778zM716.289138 737.35168c-27.116658-0.857884-36.250738 0-36.250738 0s-1.999076 31.113671-28.543431 31.684836c-26.833351 0.284444-30.830364-21.694009-31.688249-29.97248-16.269084 0-211.805298 0.854471-211.805298 0.854471s-3.424711 28.831289-29.970204 28.831289c-26.833351 0-28.261262-23.976391-29.97248-28.831289-17.414827 0-40.821191-0.571164-40.821191-0.571165s-58.803769-12.270933-66.509938-88.771698c0.854471-76.500764 0-227.793351 0-227.793351s-5.424924-70.504676 64.797582-90.771911c21.691733-0.853333 68.509013-1.143467 122.744605-1.143466l-49.955272-48.525085s-7.705031-9.704107 5.424925-20.55168c13.417813-10.843022 13.985564-6.167893 18.55488-3.024213 4.568178 3.137991 74.502827 72.329671 74.502827 72.329671h-9.419663c26.832213 0 54.522311 0.175218 81.067805 0.175218 10.275271-10.277547 68.793458-67.711431 72.791609-70.566116 4.56704-2.854684 5.422649-7.735751 18.55488 3.110685 13.131093 10.845298 5.423787 20.538027 5.423786 20.538026l-48.81408 47.09376c67.08224 0.571164 118.749867 0.853333 118.749867 0.853334s66.223218 14.556729 67.936711 90.482915c-0.855609 75.930738 0.284444 228.64896 0.284445 228.64896s-3.711431 74.213831-67.083378 85.919289z"
                fill="#333333" p-id="5477"></path>
              <path
                d="M707.439502 387.982222H322.080996C310.377813 387.982222 301.511111 397.376853 301.511111 409.366756V664.849067c0 11.986489 8.866702 21.230933 20.569885 21.230933h385.358506c11.702044 0 20.738276-9.244444 20.738276-21.230933V409.366756c0-11.989902-9.035093-21.384533-20.738276-21.384534z m-359.121351 94.867911l108.604302-20.792889 8.205654 40.759752-107.508623 20.789475-9.301333-40.756338z m167.418311 124.191858c-33.374436 36.384996-68.388409-11.488142-68.388409-11.488142l17.780054-11.490418s23.798898 42.94656 50.334151-13.953707c25.441849 55.257316 53.617778 14.49984 53.617778 14.770632l16.142791 10.397013c-0.002276 0.002276-30.093084 48.150756-69.486365 11.764622z m161.125262-83.43552l-107.781688-20.789475 8.480995-40.759752 108.326685 20.792889-9.025992 40.756338z"
                fill="#333333" p-id="5478"></path>
            </svg>
          </a>
          <a v-if="blogSettingsStore.blogSettings.githubHomepage" :href="blogSettingsStore.blogSettings.githubHomepage">
            <svg t="1731899735471" class="icon w-5 h-5" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="8187">
              <path
                d="M64 512c0 195.2 124.8 361.6 300.8 422.4 22.4 6.4 19.2-9.6 19.2-22.4v-76.8c-134.4 16-140.8-73.6-150.4-89.6-19.2-32-60.8-38.4-48-54.4 32-16 64 3.2 99.2 57.6 25.6 38.4 76.8 32 105.6 25.6 6.4-22.4 19.2-44.8 35.2-60.8-144-22.4-201.6-108.8-201.6-211.2 0-48 16-96 48-131.2-22.4-60.8 0-115.2 3.2-121.6 57.6-6.4 118.4 41.6 124.8 44.8 32-9.6 70.4-12.8 112-12.8 41.6 0 80 6.4 112 12.8 12.8-9.6 67.2-48 121.6-44.8 3.2 6.4 25.6 57.6 6.4 118.4 32 38.4 48 83.2 48 131.2 0 102.4-57.6 188.8-201.6 214.4 22.4 22.4 38.4 54.4 38.4 92.8v112c0 9.6 0 19.2 16 19.2C832 876.8 960 710.4 960 512c0-246.4-201.6-448-448-448S64 265.6 64 512z"
                fill="#040000" p-id="8188"></path>
            </svg>
          </a>
          <a v-if="blogSettingsStore.blogSettings.giteeHomepage" :href="blogSettingsStore.blogSettings.giteeHomepage">
            <svg t="1731899790783" class="icon w-5 h-5" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="9163">
              <path
                d="M512 960A448 448 0 1 1 512 64a448 448 0 0 1 0 896z m226.752-497.792H484.352a22.144 22.144 0 0 0-22.144 22.144v55.296c0 12.224 9.92 22.144 22.08 22.144h154.88c12.288 0 22.144 9.92 22.144 22.08v11.072c0 36.672-29.696 66.368-66.368 66.368H384.768a22.144 22.144 0 0 1-22.08-22.08V429.056c0-36.672 29.696-66.368 66.304-66.368h309.76c12.16 0 22.08-9.92 22.08-22.144v-55.296a22.144 22.144 0 0 0-22.08-22.144h-309.76a165.888 165.888 0 0 0-165.888 165.952v309.696c0 12.224 9.92 22.144 22.144 22.144h326.272a149.312 149.312 0 0 0 149.376-149.312V484.352a22.144 22.144 0 0 0-22.144-22.144z"
                fill="#C71D23" p-id="9164"></path>
            </svg>
          </a>
        </div>
      </div>
      <ul class="space-y-2 font-medium side-ul">
        <li>
          <a @click="router.push('/')"
            class="flex transition-all cursor-pointer duration-300 items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
            <svg t="1731642589225"
              class="icon w-5 h-5 text-[#333] transition duration-300 group-hover:text-gray-900 mr-3"
              viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7868">
              <path
                d="M173.233971 501.70554l338.765517-338.765517 338.765517 338.765517-36.972053 36.981263-301.793464-301.802674-302.294884 301.802674L173.233971 501.70554zM231.194034 856.966753l0-284.806581 5.495154 0 275.3103-273.816273 272.813432 272.813432 0 285.810445-192.371332 0L592.441589 613.132328l-184.870498 0 0 243.834424L231.194034 856.966753z"
                p-id="7869"></path>
            </svg>
            <span class="ms-3 pl-2 blog-font-cute text-[16px] pt-1">首页</span>
          </a>
        </li>
        <li>
          <a @click="router.push('/category/list')"
            class="flex transition-all cursor-pointer duration-300 items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group ">
            <svg t="1731651956728" class="icon w-5 h-5 mr-3" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="9147">
              <path d="M413 611m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z" fill="#C9F4EB" p-id="9148"></path>
              <path
                d="M286 947.82a213.66 213.66 0 0 1-151.12-364.74l443.2-443.2A213.66 213.66 0 1 1 880.24 442L437 885.24a212.29 212.29 0 0 1-151 62.58z m443.2-820.44a163.11 163.11 0 0 0-115.72 47.86l-443.2 443.2c-63.81 63.81-63.81 167.63 0 231.44s167.63 63.81 231.44 0l443.2-443.2c63.81-63.81 63.81-167.63 0-231.44a163.11 163.11 0 0 0-115.76-47.86zM737.16 947.82a212.29 212.29 0 0 1-151.08-62.58l-28.62-28.62a25 25 0 0 1 35.36-35.35l28.62 28.61a163.83 163.83 0 0 0 231.44 0c63.81-63.81 63.81-167.63 0-231.44l-25.78-25.78a25 25 0 0 1 35.36-35.36l25.78 25.78c83.3 83.31 83.3 218.85 0 302.16a212.29 212.29 0 0 1-151.08 62.58zM185 473.81a24.92 24.92 0 0 1-17.67-7.32L142.88 442c-83.3-83.31-83.3-218.85 0-302.16s218.85-83.3 302.16 0l27.28 27.28a25 25 0 0 1-35.32 35.4l-27.28-27.28c-63.81-63.81-167.63-63.81-231.44 0s-63.81 167.63 0 231.44l24.45 24.46A25 25 0 0 1 185 473.81z"
                p-id="9149"></path>
              <path
                d="M505.09 782a84.41 84.41 0 0 1-60.1-24.9L263 575.13a85.1 85.1 0 0 1 0-120.21L449.92 268a85 85 0 0 1 120.21 0l182 182a85.1 85.1 0 0 1 0 120.21L565.2 757.08A84.44 84.44 0 0 1 505.09 782zM510 293.14a34.78 34.78 0 0 0-24.75 10.26L298.4 490.28a35 35 0 0 0 0 49.5l181.94 182a35 35 0 0 0 49.5 0l186.89-186.94a35.05 35.05 0 0 0 0-49.5l-182-181.94A34.78 34.78 0 0 0 510 293.14z"
                p-id="9150"></path>
              <path
                d="M577.74 467.51h-1.23l-1.23-0.09c-0.81-0.08-1.63-0.21-2.43-0.37s-1.59-0.36-2.37-0.6-1.55-0.51-2.3-0.82-1.5-0.67-2.22-1.05-1.42-0.8-2.1-1.25a23.32 23.32 0 0 1-2-1.46c-0.32-0.26-0.64-0.53-0.94-0.8s-0.6-0.56-0.89-0.85-0.58-0.59-0.85-0.89-0.54-0.62-0.8-0.94a23.32 23.32 0 0 1-1.46-2c-0.45-0.68-0.87-1.39-1.25-2.1s-0.74-1.47-1.05-2.22a23.28 23.28 0 0 1-0.82-2.3c-0.24-0.78-0.44-1.58-0.6-2.37s-0.29-1.62-0.37-2.43c0-0.41-0.07-0.82-0.09-1.22s0-0.83 0-1.24v-1.23c0-0.41 0.05-0.82 0.09-1.23 0.08-0.8 0.21-1.62 0.37-2.42a25.64 25.64 0 0 1 1.42-4.68c0.31-0.75 0.67-1.49 1.05-2.21s0.8-1.43 1.25-2.11a23.32 23.32 0 0 1 1.46-2c0.26-0.32 0.53-0.63 0.8-0.93s0.56-0.61 0.85-0.9 0.59-0.57 0.89-0.85 0.62-0.54 0.94-0.8c0.63-0.51 1.29-1 2-1.45s1.38-0.88 2.1-1.26 1.46-0.73 2.22-1 1.52-0.59 2.3-0.83 1.58-0.44 2.37-0.6 1.62-0.28 2.43-0.36c0.41 0 0.82-0.08 1.23-0.1q1.23-0.06 2.46 0c0.41 0 0.82 0.06 1.23 0.1 0.81 0.08 1.62 0.2 2.42 0.36a24.37 24.37 0 0 1 2.38 0.6c0.77 0.24 1.55 0.52 2.3 0.83s1.49 0.66 2.21 1a23.33 23.33 0 0 1 2.1 1.26c0.68 0.45 1.35 0.94 2 1.45 0.32 0.26 0.63 0.53 0.93 0.8s0.61 0.56 0.9 0.85 0.57 0.59 0.84 0.9 0.55 0.61 0.81 0.93c0.51 0.63 1 1.29 1.45 2s0.87 1.39 1.26 2.11 0.73 1.46 1 2.21 0.59 1.53 0.83 2.3 0.44 1.58 0.6 2.38 0.28 1.62 0.36 2.42c0 0.41 0.07 0.82 0.1 1.23s0 0.82 0 1.23v1.24c0 0.41-0.06 0.81-0.1 1.22-0.08 0.81-0.2 1.63-0.36 2.43s-0.37 1.59-0.6 2.37-0.52 1.55-0.83 2.3-0.66 1.5-1 2.22-0.81 1.42-1.26 2.1-0.94 1.34-1.45 2c-0.26 0.32-0.53 0.63-0.81 0.94s-0.56 0.6-0.84 0.89-0.59 0.58-0.9 0.85-0.61 0.54-0.93 0.8a24.91 24.91 0 0 1-4.08 2.71c-0.72 0.38-1.46 0.73-2.21 1.05s-1.53 0.58-2.3 0.82a24.37 24.37 0 0 1-2.38 0.6c-0.8 0.16-1.61 0.29-2.42 0.37l-1.23 0.09zM507.9 537.35h-1.23l-1.23-0.09c-0.81-0.09-1.62-0.21-2.43-0.37s-1.59-0.36-2.37-0.6a23.34 23.34 0 0 1-2.3-0.83c-0.75-0.31-1.5-0.66-2.22-1s-1.42-0.81-2.1-1.26-1.34-0.94-2-1.45c-0.32-0.26-0.63-0.53-0.93-0.8s-0.61-0.57-0.9-0.85a25.2 25.2 0 0 1-7.32-17.68v-1.23q0-0.61 0.09-1.23c0.08-0.81 0.21-1.62 0.37-2.42a24.66 24.66 0 0 1 1.43-4.68c0.31-0.75 0.66-1.5 1-2.21s0.81-1.43 1.25-2.11 0.95-1.34 1.46-2c0.26-0.32 0.53-0.63 0.8-0.93s0.56-0.61 0.85-0.9 0.59-0.57 0.9-0.85 0.61-0.54 0.93-0.8c0.63-0.51 1.29-1 2-1.45s1.39-0.88 2.1-1.26 1.47-0.73 2.22-1 1.52-0.59 2.3-0.83 1.58-0.44 2.37-0.6 1.62-0.28 2.43-0.37q0.62-0.06 1.23-0.09 1.23-0.06 2.46 0 0.62 0 1.23 0.09c0.81 0.09 1.62 0.21 2.42 0.37a24.37 24.37 0 0 1 2.38 0.6c0.77 0.24 1.55 0.52 2.3 0.83s1.5 0.66 2.21 1 1.43 0.81 2.11 1.26 1.34 0.94 2 1.45c0.32 0.26 0.63 0.53 0.93 0.8s0.61 0.57 0.9 0.85 0.57 0.59 0.85 0.9 0.54 0.61 0.8 0.93c0.51 0.63 1 1.29 1.46 2s0.87 1.39 1.25 2.11 0.73 1.46 1 2.21 0.58 1.53 0.82 2.3a24.37 24.37 0 0 1 0.6 2.38c0.16 0.8 0.29 1.61 0.37 2.42q0.06 0.62 0.09 1.23t0 1.23v1.23q0 0.62-0.09 1.23a25.479 25.479 0 0 1-1.79 7.1c-0.31 0.75-0.67 1.5-1 2.21s-0.8 1.43-1.25 2.11-1 1.34-1.46 2c-0.26 0.32-0.53 0.63-0.8 0.93s-0.56 0.61-0.85 0.9-0.59 0.57-0.9 0.85-0.61 0.54-0.93 0.8c-0.63 0.51-1.29 1-2 1.45s-1.39 0.88-2.11 1.26-1.46 0.73-2.21 1a24.66 24.66 0 0 1-4.68 1.43c-0.8 0.16-1.61 0.28-2.42 0.37l-1.23 0.09zM438.06 607.19h-1.23l-1.23-0.09c-0.81-0.09-1.62-0.21-2.42-0.37a24.37 24.37 0 0 1-2.38-0.6c-0.77-0.24-1.55-0.52-2.3-0.83s-1.5-0.66-2.21-1-1.43-0.81-2.11-1.26-1.34-0.94-2-1.45c-0.32-0.26-0.63-0.53-0.93-0.8s-0.61-0.56-0.9-0.85-0.57-0.59-0.84-0.9-0.55-0.61-0.81-0.93c-0.51-0.63-1-1.29-1.45-2s-0.88-1.39-1.26-2.11-0.73-1.46-1-2.21-0.59-1.53-0.83-2.3a24.37 24.37 0 0 1-0.6-2.38c-0.16-0.8-0.28-1.61-0.37-2.42q-0.06-0.61-0.09-1.23t0-1.23V581q0-0.61 0.09-1.23c0.09-0.81 0.21-1.63 0.37-2.43s0.36-1.59 0.6-2.37 0.52-1.55 0.83-2.3 0.66-1.5 1-2.22 0.81-1.42 1.26-2.1 0.94-1.34 1.45-2c0.26-0.32 0.53-0.63 0.81-0.94s0.56-0.6 0.84-0.89 0.59-0.57 0.9-0.85 0.61-0.54 0.93-0.8a23.32 23.32 0 0 1 2-1.46c0.68-0.45 1.39-0.87 2.11-1.25s1.46-0.74 2.21-1a25.64 25.64 0 0 1 4.68-1.42c0.8-0.16 1.61-0.29 2.42-0.37l1.23-0.09h2.46l1.23 0.09c0.81 0.08 1.63 0.21 2.43 0.37s1.59 0.36 2.37 0.6a23.28 23.28 0 0 1 2.3 0.82c0.75 0.31 1.5 0.67 2.22 1s1.42 0.8 2.1 1.25a23.32 23.32 0 0 1 2 1.46c0.32 0.26 0.63 0.53 0.94 0.8s0.6 0.56 0.89 0.85 0.58 0.59 0.85 0.89 0.54 0.62 0.8 0.94a23.32 23.32 0 0 1 1.46 2c0.45 0.68 0.87 1.38 1.25 2.1s0.73 1.46 1 2.22a23.28 23.28 0 0 1 0.82 2.3c0.24 0.78 0.44 1.58 0.6 2.37s0.29 1.62 0.37 2.43q0.06 0.62 0.09 1.23t0 1.23v1.23q0 0.61-0.09 1.23c-0.08 0.81-0.21 1.62-0.37 2.42a25.64 25.64 0 0 1-1.42 4.68c-0.32 0.75-0.67 1.5-1 2.21s-0.8 1.43-1.25 2.11a23.32 23.32 0 0 1-1.46 2c-0.26 0.32-0.53 0.63-0.8 0.93s-0.56 0.61-0.85 0.9-0.59 0.57-0.89 0.85-0.62 0.54-0.94 0.8c-0.63 0.51-1.29 1-2 1.45s-1.38 0.88-2.1 1.26-1.47 0.73-2.22 1-1.52 0.59-2.3 0.83-1.58 0.44-2.37 0.6-1.62 0.28-2.43 0.37l-1.23 0.09c-0.4-0.01-0.82 0-1.23 0zM511.22 401H510c-0.41 0-0.82-0.05-1.22-0.1-0.81-0.08-1.63-0.2-2.43-0.36a24.18 24.18 0 0 1-2.37-0.6c-0.78-0.24-1.55-0.52-2.31-0.83s-1.49-0.66-2.21-1a23.33 23.33 0 0 1-2.1-1.26c-0.68-0.45-1.35-0.94-2-1.45-0.31-0.26-0.63-0.53-0.93-0.8s-0.6-0.56-0.89-0.85-0.58-0.59-0.85-0.9-0.55-0.61-0.8-0.93a23.32 23.32 0 0 1-1.46-2c-0.45-0.68-0.87-1.39-1.26-2.11s-0.73-1.46-1-2.21-0.59-1.52-0.83-2.3-0.44-1.58-0.6-2.37-0.28-1.62-0.36-2.43q-0.06-0.61-0.09-1.23v-1.23-1.23c0-0.41 0.05-0.82 0.09-1.23 0.08-0.81 0.2-1.62 0.36-2.42s0.37-1.6 0.6-2.38 0.52-1.55 0.83-2.3 0.66-1.5 1-2.21 0.81-1.43 1.26-2.11a23.32 23.32 0 0 1 1.46-2c0.25-0.32 0.52-0.63 0.8-0.94s0.56-0.6 0.85-0.89 0.59-0.57 0.89-0.85 0.62-0.54 0.93-0.8c0.63-0.51 1.3-1 2-1.46s1.38-0.87 2.1-1.25 1.46-0.73 2.21-1a24.49 24.49 0 0 1 2.31-0.83 24.18 24.18 0 0 1 2.37-0.6c0.8-0.16 1.62-0.28 2.43-0.37 0.4 0 0.81-0.07 1.22-0.09h2.47c0.4 0 0.82 0.05 1.22 0.09 0.81 0.09 1.63 0.21 2.43 0.37a24.18 24.18 0 0 1 2.37 0.6 23.52 23.52 0 0 1 2.31 0.83c0.75 0.31 1.49 0.66 2.21 1s1.43 0.81 2.1 1.25 1.35 1 2 1.46c0.31 0.26 0.63 0.53 0.93 0.8s0.6 0.56 0.89 0.85 0.58 0.59 0.85 0.89 0.54 0.62 0.8 0.94a23.32 23.32 0 0 1 1.46 2c0.45 0.68 0.87 1.39 1.25 2.11a22.33 22.33 0 0 1 1 2.21 23.28 23.28 0 0 1 0.82 2.3 24.37 24.37 0 0 1 0.6 2.38 22.1 22.1 0 0 1 0.37 2.42q0.06 0.61 0.09 1.23t0 1.23v1.23q0 0.61-0.09 1.23a22.65 22.65 0 0 1-0.37 2.43c-0.16 0.79-0.36 1.59-0.6 2.37a23.28 23.28 0 0 1-0.82 2.3 22.33 22.33 0 0 1-1 2.21c-0.38 0.72-0.8 1.43-1.25 2.11a23.32 23.32 0 0 1-1.46 2c-0.26 0.32-0.52 0.63-0.8 0.93s-0.56 0.61-0.85 0.9-0.59 0.57-0.89 0.85-0.62 0.54-0.93 0.8c-0.63 0.51-1.3 1-2 1.45A23.33 23.33 0 0 1 523 398c-0.72 0.38-1.46 0.73-2.21 1s-1.53 0.59-2.31 0.83a24.18 24.18 0 0 1-2.37 0.6c-0.8 0.16-1.62 0.28-2.43 0.36-0.4 0.05-0.82 0.08-1.22 0.1s-0.83 0.11-1.24 0.11zM441.39 470.84h-1.24c-0.41 0-0.82-0.05-1.22-0.1a24.176 24.176 0 0 1-4.8-0.96c-0.78-0.24-1.55-0.52-2.3-0.83s-1.5-0.66-2.22-1-1.42-0.81-2.1-1.26-1.34-0.94-2-1.45a23.678 23.678 0 0 1-1.83-1.66c-0.29-0.29-0.58-0.59-0.85-0.89s-0.54-0.62-0.8-0.93a25.75 25.75 0 0 1-3.76-6.29 25.64 25.64 0 0 1-1.42-4.68c-0.16-0.8-0.29-1.61-0.37-2.42q-0.06-0.62-0.09-1.23t0-1.23v-1.23q0-0.62 0.09-1.23a25.479 25.479 0 0 1 0.97-4.8 23.28 23.28 0 0 1 0.82-2.3 23.63 23.63 0 0 1 1.05-2.22c0.38-0.71 0.8-1.42 1.25-2.1a23.32 23.32 0 0 1 1.46-2c0.26-0.32 0.53-0.63 0.8-0.94s0.56-0.6 0.85-0.89 0.59-0.57 0.89-0.85 0.62-0.54 0.94-0.8c0.63-0.51 1.29-1 2-1.46s1.38-0.87 2.1-1.25 1.46-0.74 2.22-1.05a23.28 23.28 0 0 1 2.3-0.82c0.78-0.24 1.58-0.44 2.37-0.6s1.62-0.29 2.43-0.37c0.4 0 0.82-0.07 1.22-0.09h2.47l1.23 0.09c0.81 0.08 1.62 0.21 2.42 0.37a25.64 25.64 0 0 1 4.68 1.42c0.75 0.31 1.49 0.67 2.21 1.05a23.24 23.24 0 0 1 2.1 1.25c0.68 0.45 1.35 0.95 2 1.46 0.31 0.26 0.63 0.53 0.93 0.8s0.61 0.56 0.89 0.85 0.58 0.59 0.85 0.89 0.55 0.62 0.81 0.94c0.51 0.63 1 1.29 1.45 2s0.87 1.39 1.26 2.1 0.73 1.47 1 2.22 0.59 1.52 0.83 2.3 0.44 1.58 0.6 2.37 0.28 1.62 0.36 2.43q0.06 0.62 0.09 1.23v2.46c0 0.41-0.05 0.82-0.09 1.23-0.08 0.81-0.2 1.62-0.36 2.42s-0.37 1.6-0.6 2.38-0.52 1.55-0.83 2.3-0.66 1.49-1 2.21-0.81 1.43-1.26 2.1-0.94 1.35-1.45 2c-0.26 0.31-0.53 0.63-0.81 0.93s-0.56 0.61-0.85 0.89-0.58 0.58-0.89 0.85-0.62 0.55-0.93 0.81c-0.63 0.51-1.3 1-2 1.45a23.33 23.33 0 0 1-2.1 1.26c-0.72 0.38-1.46 0.73-2.21 1s-1.53 0.59-2.3 0.83a24.37 24.37 0 0 1-2.38 0.6c-0.8 0.16-1.61 0.28-2.42 0.36-0.41 0.05-0.82 0.08-1.23 0.1zM371.55 540.68h-1.23c-0.41 0-0.82-0.06-1.23-0.1a24.176 24.176 0 0 1-4.8-0.96c-0.78-0.24-1.55-0.52-2.3-0.83s-1.5-0.66-2.22-1-1.42-0.81-2.1-1.26-1.34-0.94-2-1.45a23.678 23.678 0 0 1-1.83-1.66c-0.29-0.29-0.57-0.59-0.85-0.89s-0.54-0.62-0.8-0.93c-0.51-0.63-1-1.3-1.46-2a23.24 23.24 0 0 1-1.25-2.1c-0.38-0.72-0.73-1.46-1.05-2.21a26.29 26.29 0 0 1-1.42-4.68c-0.16-0.8-0.29-1.62-0.37-2.43 0-0.4-0.07-0.81-0.09-1.22s0-0.83 0-1.23v-1.24c0-0.41 0.05-0.82 0.09-1.22 0.08-0.81 0.21-1.63 0.37-2.43a24.18 24.18 0 0 1 0.6-2.37 23.46 23.46 0 0 1 0.82-2.31c0.32-0.75 0.67-1.49 1.05-2.21s0.8-1.42 1.25-2.1 0.95-1.35 1.46-2c0.26-0.31 0.53-0.63 0.8-0.93s0.56-0.6 0.85-0.89 0.59-0.58 0.89-0.85 0.62-0.54 0.94-0.8a23.32 23.32 0 0 1 2-1.46c0.68-0.45 1.39-0.87 2.1-1.25a23.63 23.63 0 0 1 2.22-1.05c0.75-0.31 1.52-0.59 2.3-0.83s1.58-0.43 2.37-0.6 1.62-0.28 2.43-0.36l1.23-0.09a20.19 20.19 0 0 1 2.46 0l1.23 0.09c0.81 0.08 1.62 0.2 2.42 0.36s1.6 0.37 2.38 0.6 1.55 0.52 2.3 0.83a22.33 22.33 0 0 1 2.21 1.05c0.72 0.38 1.43 0.8 2.11 1.25a23.32 23.32 0 0 1 2 1.46c0.32 0.26 0.63 0.53 0.93 0.8s0.61 0.56 0.9 0.85 0.57 0.59 0.85 0.89 0.54 0.62 0.8 0.93c0.51 0.63 1 1.3 1.46 2s0.87 1.38 1.25 2.1 0.73 1.46 1 2.21a23.52 23.52 0 0 1 0.83 2.31 24.18 24.18 0 0 1 0.6 2.37c0.16 0.8 0.28 1.62 0.37 2.43 0 0.4 0.07 0.82 0.09 1.22s0 0.83 0 1.24v1.23c0 0.41 0 0.82-0.09 1.22-0.09 0.81-0.21 1.63-0.37 2.43a25.27 25.27 0 0 1-1.43 4.68c-0.31 0.75-0.66 1.49-1 2.21a23.24 23.24 0 0 1-1.25 2.1c-0.46 0.68-0.95 1.35-1.46 2-0.26 0.31-0.53 0.63-0.8 0.93s-0.56 0.61-0.85 0.89-0.59 0.58-0.9 0.85-0.61 0.55-0.93 0.81c-0.63 0.51-1.29 1-2 1.45s-1.39 0.87-2.11 1.26-1.46 0.73-2.21 1-1.53 0.59-2.3 0.83a24.37 24.37 0 0 1-2.38 0.6c-0.8 0.16-1.61 0.28-2.42 0.36-0.41 0-0.82 0.08-1.23 0.1zM644.25 534H643l-1.23-0.1q-1.21-0.12-2.43-0.36c-0.79-0.16-1.59-0.37-2.37-0.6s-1.55-0.52-2.3-0.83-1.5-0.66-2.22-1-1.42-0.81-2.1-1.26a23.32 23.32 0 0 1-2-1.46c-0.32-0.25-0.63-0.52-0.94-0.8s-0.6-0.56-0.89-0.85-0.57-0.59-0.85-0.89-0.54-0.62-0.8-0.93c-0.52-0.63-1-1.3-1.46-2a23.24 23.24 0 0 1-1.25-2.1c-0.38-0.72-0.74-1.46-1.05-2.21a23.46 23.46 0 0 1-0.82-2.31 24.18 24.18 0 0 1-0.6-2.37c-0.16-0.8-0.29-1.62-0.37-2.43 0-0.4-0.07-0.82-0.09-1.22s0-0.83 0-1.24v-1.23c0-0.41 0.05-0.82 0.09-1.23 0.08-0.8 0.21-1.62 0.37-2.42a25.64 25.64 0 0 1 1.42-4.68c0.31-0.75 0.67-1.49 1.05-2.21a23.24 23.24 0 0 1 1.25-2.1c0.46-0.68 0.94-1.35 1.46-2 0.26-0.31 0.53-0.63 0.8-0.93s0.56-0.61 0.85-0.89 0.59-0.58 0.89-0.85 0.62-0.55 0.94-0.81c0.63-0.51 1.29-1 2-1.45s1.39-0.87 2.1-1.26 1.47-0.73 2.22-1a23.28 23.28 0 0 1 2.3-0.82c0.78-0.24 1.58-0.44 2.37-0.6a22.65 22.65 0 0 1 2.43-0.37l1.23-0.09h2.46l1.23 0.09a22.1 22.1 0 0 1 2.42 0.37 24.37 24.37 0 0 1 2.38 0.6 23.28 23.28 0 0 1 2.3 0.82c0.75 0.31 1.5 0.66 2.21 1s1.43 0.81 2.11 1.26 1.34 0.94 2 1.45q0.48 0.39 0.93 0.81c0.31 0.27 0.61 0.56 0.9 0.85s0.57 0.59 0.85 0.89 0.54 0.62 0.8 0.93c0.51 0.63 1 1.3 1.46 2s0.87 1.38 1.25 2.1 0.73 1.46 1 2.21 0.59 1.53 0.83 2.3a24.37 24.37 0 0 1 0.6 2.38c0.16 0.8 0.28 1.62 0.36 2.42 0 0.41 0.08 0.82 0.1 1.23s0 0.83 0 1.23v1.24c0 0.41-0.05 0.82-0.1 1.22-0.08 0.81-0.2 1.63-0.36 2.43a24.18 24.18 0 0 1-0.6 2.37c-0.24 0.78-0.52 1.56-0.83 2.31s-0.66 1.49-1 2.21-0.81 1.43-1.25 2.1-0.95 1.35-1.46 2c-0.26 0.31-0.53 0.63-0.8 0.93s-0.56 0.6-0.85 0.89-0.59 0.58-0.9 0.85-0.61 0.55-0.93 0.8a23.32 23.32 0 0 1-2 1.46c-0.68 0.45-1.39 0.87-2.11 1.26s-1.46 0.73-2.21 1-1.52 0.59-2.3 0.83-1.58 0.44-2.38 0.6-1.61 0.28-2.42 0.36l-1.23 0.1zM574.41 603.86h-1.23l-1.23-0.09c-0.81-0.08-1.62-0.21-2.42-0.37a25.64 25.64 0 0 1-4.68-1.42c-0.75-0.31-1.5-0.67-2.21-1.05s-1.43-0.8-2.11-1.25a23.32 23.32 0 0 1-2-1.46c-0.32-0.26-0.63-0.53-0.93-0.8s-0.61-0.56-0.9-0.85-0.57-0.59-0.85-0.89-0.54-0.62-0.8-0.93c-0.51-0.63-1-1.3-1.45-2s-0.88-1.38-1.26-2.1-0.73-1.46-1-2.22a23.34 23.34 0 0 1-0.83-2.3c-0.24-0.78-0.44-1.58-0.6-2.37s-0.28-1.62-0.37-2.43q-0.06-0.62-0.09-1.23t0-1.23v-1.23q0-0.62 0.09-1.23c0.09-0.81 0.21-1.62 0.37-2.42a24.66 24.66 0 0 1 1.43-4.68c0.31-0.75 0.66-1.5 1-2.21s0.81-1.43 1.26-2.11 0.94-1.34 1.45-2c0.26-0.32 0.53-0.63 0.8-0.93s0.56-0.61 0.85-0.9 0.59-0.57 0.9-0.84 0.61-0.55 0.93-0.81c0.63-0.51 1.29-1 2-1.45s1.39-0.87 2.11-1.26 1.46-0.73 2.21-1 1.53-0.59 2.3-0.83a24.37 24.37 0 0 1 2.38-0.6c0.8-0.16 1.61-0.28 2.42-0.36 0.41 0 0.82-0.08 1.23-0.1h2.47c0.4 0 0.82 0.05 1.22 0.1a24.176 24.176 0 0 1 4.8 0.96c0.78 0.24 1.55 0.52 2.3 0.83s1.5 0.66 2.22 1 1.42 0.81 2.1 1.26 1.34 0.94 2 1.45c0.32 0.26 0.63 0.53 0.94 0.81s0.6 0.56 0.89 0.84 0.58 0.59 0.85 0.9 0.54 0.61 0.8 0.93c0.51 0.63 1 1.29 1.46 2s0.87 1.39 1.25 2.11 0.73 1.46 1 2.21 0.58 1.53 0.82 2.3a24.37 24.37 0 0 1 0.6 2.38c0.16 0.8 0.29 1.61 0.37 2.42q0.06 0.61 0.09 1.23t0 1.23v1.23q0 0.62-0.09 1.23c-0.08 0.81-0.21 1.63-0.37 2.43s-0.36 1.59-0.6 2.37-0.51 1.55-0.82 2.3-0.67 1.5-1 2.22-0.8 1.42-1.25 2.1-1 1.35-1.46 2c-0.26 0.31-0.53 0.63-0.8 0.93s-0.56 0.6-0.85 0.89-0.59 0.58-0.89 0.85-0.62 0.54-0.94 0.8a23.32 23.32 0 0 1-2 1.46c-0.68 0.45-1.38 0.87-2.1 1.25s-1.46 0.74-2.22 1.05a23.28 23.28 0 0 1-2.3 0.82c-0.78 0.24-1.58 0.44-2.37 0.6s-1.62 0.29-2.43 0.37c-0.4 0-0.82 0.07-1.22 0.09s-0.83 0-1.24 0zM504.57 673.7h-1.23c-0.41 0-0.82 0-1.23-0.1-0.81-0.08-1.62-0.2-2.42-0.36a24.37 24.37 0 0 1-2.38-0.6c-0.77-0.24-1.55-0.52-2.3-0.83s-1.5-0.66-2.21-1-1.43-0.81-2.11-1.26-1.34-0.94-2-1.45c-0.32-0.26-0.63-0.53-0.93-0.8s-0.61-0.57-0.9-0.85-0.57-0.59-0.85-0.9-0.54-0.61-0.8-0.93c-0.51-0.63-1-1.29-1.45-2s-0.87-1.39-1.26-2.1-0.73-1.47-1-2.22-0.59-1.52-0.83-2.3-0.44-1.58-0.6-2.37-0.28-1.62-0.36-2.43c-0.05-0.41-0.08-0.82-0.1-1.23s0-0.82 0-1.23v-1.23c0-0.41 0-0.82 0.1-1.23 0.08-0.81 0.2-1.62 0.36-2.42a24.37 24.37 0 0 1 0.6-2.38c0.24-0.78 0.52-1.55 0.83-2.3s0.66-1.5 1-2.21 0.81-1.43 1.26-2.11 0.94-1.34 1.45-2c0.26-0.32 0.53-0.63 0.8-0.93s0.57-0.61 0.85-0.9 0.59-0.57 0.9-0.85 0.61-0.54 0.93-0.8c0.63-0.51 1.29-1 2-1.45s1.39-0.88 2.11-1.26 1.46-0.73 2.21-1 1.53-0.59 2.3-0.83a24.37 24.37 0 0 1 2.38-0.6c0.8-0.16 1.61-0.28 2.42-0.36 0.41-0.05 0.82-0.08 1.23-0.1h2.46c0.41 0 0.83 0 1.23 0.1a24.176 24.176 0 0 1 4.8 0.96c0.78 0.24 1.55 0.52 2.3 0.83s1.5 0.66 2.22 1 1.42 0.81 2.1 1.26 1.34 0.94 2 1.45c0.32 0.26 0.63 0.53 0.94 0.8l0.89 0.85c0.29 0.29 0.58 0.59 0.85 0.9s0.54 0.61 0.8 0.93a23.32 23.32 0 0 1 1.46 2c0.45 0.68 0.87 1.39 1.25 2.11s0.74 1.46 1 2.21a23.28 23.28 0 0 1 0.82 2.3 24.37 24.37 0 0 1 0.6 2.38c0.16 0.8 0.29 1.61 0.37 2.42q0.06 0.62 0.09 1.23t0 1.23v1.23c0 0.4 0 0.82-0.09 1.23-0.08 0.81-0.21 1.63-0.37 2.43s-0.36 1.59-0.6 2.37a23.28 23.28 0 0 1-0.82 2.3c-0.31 0.75-0.67 1.5-1 2.22s-0.8 1.42-1.25 2.1a23.32 23.32 0 0 1-1.46 2c-0.26 0.32-0.53 0.63-0.8 0.93s-0.56 0.61-0.85 0.9l-0.89 0.85c-0.31 0.27-0.62 0.54-0.94 0.8-0.63 0.51-1.29 1-2 1.45s-1.38 0.88-2.1 1.26-1.46 0.73-2.22 1-1.52 0.59-2.3 0.83-1.58 0.44-2.37 0.6-1.62 0.28-2.43 0.36c-0.4 0-0.82 0.08-1.23 0.1s-0.8 0-1.23 0z"
                p-id="9151"></path>
            </svg>
            <span class="ms-3 pl-2 blog-font-cute text-[16px] pt-1">分类</span>
          </a>
        </li>
        <li>
          <a @click="router.push('/tag/list')"
            class="flex items-center cursor-pointer transition-all duration-300 p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
            <svg t="1731652656454" class="icon w-5 h-5 mr-3" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="9308">
              <path
                d="M982.8 679.4L679.9 982.3c-4.7 4.7-12.3 4.7-17 0l-78.8-78.8c-4.7-4.7-4.7-12.3 0-17L887 583.6c4.7-4.7 12.3-4.7 17 0l78.8 78.8c4.6 4.7 4.6 12.3 0 17z"
                p-id="9309"></path>
              <path
                d="M354.9 734.6c-16 0-31.1-6.2-42.4-17.6L46.8 451.3C30.5 435 25 410.5 32.7 388.8l83.5-236.1c6.1-17.2 19.4-30.5 36.6-36.6l236.1-83.5c21.7-7.7 46.2-2.1 62.4 14.1L717 312.5c23.4 23.4 23.4 61.5 0 84.9l-14.1-14.1 14.1 14.1L397.4 717c-11.4 11.3-26.4 17.6-42.5 17.6z m53.9-665.4c-2.2 0-4.5 0.4-6.6 1.1l-236.1 83.5c-5.7 2-10.2 6.5-12.2 12.2L70.4 402.2c-2.6 7.2-0.7 15.4 4.7 20.8l265.7 265.7c3.8 3.8 8.8 5.9 14.1 5.9 5.3 0 10.4-2.1 14.1-5.9l319.6-319.6c7.8-7.8 7.8-20.5 0-28.3L423 75.1c-3.8-3.8-9-5.9-14.2-5.9zM670.3 994.7c-15.4 0-30.7-5.8-42.4-17.5L553.7 903c-23.4-23.4-23.4-61.5 0-84.9l264.5-264.5c23.4-23.4 61.5-23.4 84.9 0l74.2 74.2c23.4 23.4 23.4 61.5 0 84.9L712.7 977.2c-11.7 11.7-27 17.5-42.4 17.5z m190.2-418.6c-5.1 0-10.2 1.9-14.1 5.8L581.9 846.4c-7.8 7.8-7.8 20.5 0 28.3l74.2 74.2c7.8 7.8 20.5 7.8 28.3 0l264.5-264.5c7.8-7.8 7.8-20.5 0-28.3l-74.2-74.2c-3.9-3.9-9.1-5.8-14.2-5.8zM397.4 821.8c-5.1 0-10.2-2-14.1-5.9-7.8-7.8-7.8-20.5 0-28.3l404.5-404.5c7.8-7.8 20.5-7.8 28.3 0 7.8 7.8 7.8 20.5 0 28.3L411.5 816c-3.9 3.9-9 5.8-14.1 5.8z"
                p-id="9310"></path>
              <path
                d="M586.217 614.447l28.284-28.284 99.7 99.7-28.283 28.285zM543 553c-2.6 0-5.1-1-7.1-2.9l-222-222c-3.9-3.9-3.9-10.2 0-14.1 3.9-3.9 10.2-3.9 14.1 0l222 222c3.9 3.9 3.9 10.2 0 14.1-1.9 2-4.4 2.9-7 2.9z"
                p-id="9311"></path>
            </svg>
            <span class="ms-3 pt-1 pl-2 whitespace-nowrap blog-font-cute">标签</span>
            <!-- <span
              class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span> -->
          </a>
        </li>
        <li>
          <a @click="router.push('/archive/list')"
            class="flex items-center cursor-pointer transition-all duration-300 p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
            <svg t="1731675931279" class="icon w-5 h-5 mr-3" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="5548">
              <path
                d="M481.28 801.792h61.44v77.824h-61.44zM798.72 481.28h77.824v61.44H798.72zM136.192 481.28h77.824v61.44h-77.824z"
                p-id="5549"></path>
              <path
                d="M512 955.392C267.264 955.392 68.608 756.736 68.608 512c0-125.952 54.272-246.784 147.456-330.752l54.272 61.44C193.536 311.296 150.528 409.6 150.528 512c0 199.68 162.816 361.472 361.472 361.472S873.472 711.68 873.472 512C873.472 274.432 675.84 150.528 481.28 150.528v-81.92c235.52 0 474.112 152.576 474.112 443.392 0 244.736-198.656 443.392-443.392 443.392z"
                p-id="5550"></path>
              <path d="M481.28 75.776h81.92v443.392h-81.92z" p-id="5551"></path>
              <path d="M499.67104 468.7872l63.6928 51.52768-108.83072 134.5536-63.6928-51.52768z" p-id="5552"></path>
            </svg>
            <span class="ms-3 pt-1 pl-2 whitespace-nowrap blog-font-cute">归档</span>
          </a>
        </li>
        <!-- Wiki -->
        <li>
          <a @click="router.push('/wiki/list')"
            class="flex items-center transition-all duration-300 p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
            <svg t="1734787832173" class="icon size-5 mr-3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="4377">
              <path
                d="M895.01 65.64h63.76v317.93h-63.76zM453.16 64h63.76v319.57h-63.76zM318.7 65.64V320.2h-64.04V65.64h-63.77V320.2h-63.72V65.64h-64.4v318.15h319.69V65.64zM62.77 447.6V960h896V447.6h-896z m192.02 448.19h-127.8V832.2h127.8v63.59z m127.53-128.72H126.99v-63.58h255.33v63.58z m0-127.17H126.99v-63.59h255.33v63.59z m320.53 192.3h-63.76v63.58h-63.76V832.2h63.76v-63.59h63.76v63.59z m191.29 63.59h-63.77V703.73h-63.76v63.35h-63.76V703.5h63.76v-63.6H575.33v-63.59h318.81v319.48z"
                p-id="4378"></path>
              <path
                d="M653.53 64v319.79h-65.9V64h65.9z m67.75 148.09l103.02 171.7h-80.28l-76.11-126.8v-71.27L743.56 64h76.11l-98.39 148.09z"
                fill="#231815" p-id="4379"></path>
            </svg>
            <span class="ms-3 pt-1 pl-2 whitespace-nowrap blog-font-cute">Wiki</span>
          </a>
        </li>

        <li>
          <a href="#"
            class="flex items-center transition-all duration-300 p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
            <svg class="flex-shrink-0 w-5 h-5 mr-3 transition duration-300 " xmlns="http://www.w3.org/2000/svg"
              fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
            </svg>
            <span class="ms-3 pt-1 pl-2 whitespace-nowrap blog-font-cute">小记</span>
          </a>
        </li>


      </ul>
    </div>
  </el-drawer>

  <!-- 搜索模态框 -->
  <div id="search-modal" tabindex="-1" aria-hidden="true"
    class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative p-4 w-full max-w-2xl max-h-full">
      <!-- Modal content -->
      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
        <!-- Modal header -->
        <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
          <form class="w-full mr-2">
            <label for="search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
            <div class="relative">
              <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                <div v-if="searchLoading" role="status">
                  <svg aria-hidden="true" class="w-4 h-4 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
                    viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
                      fill="currentColor" />
                    <path
                      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
                      fill="currentFill" />
                  </svg>
                  <span class="sr-only">Loading...</span>
                </div>
                <svg v-else class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                </svg>
              </div>
              <input type="search" id="search" v-model="searchWord" ref="searchInput"
                class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                placeholder="Search" required>
            </div>
          </form>
          <button type="button" @click="searchModal.hide()"
            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
            </svg>
            <span class="sr-only">Close modal</span>
          </button>
        </div>
        <!-- Modal body -->
        <div class="p-4 md:p-5 space-y-4">
          <div v-if="searchArticles && searchArticles.length > 0">
            <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
              共搜索到 {{ total }} 篇相关文章
            </p>
            <ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
              <li v-for="(item, index) in searchArticles" :key="index">
                <a @click="goArticleDetailPage(item.id)"
                  class="items-center block p-3 sm:flex hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700"><img
                    class="w-24 h-12 mb-3 mr-3 rounded-lg sm:mb-0 object-cover "
                    :src="item.cover ? item.cover : 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80'">
                  <div class="text-gray-600 dark:text-gray-400">
                    <h2 class="text-base font-normal text-gray-900" v-html="item.title"></h2>
                    <span class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400"><svg
                        class="inline w-2.5 h-2.5 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z">
                        </path>
                      </svg>{{ item.createDate }}</span>
                  </div>
                </a>
              </li>
            </ol>
            <!-- 分页 -->
            <div class="flex mt-7">
              <a v-if="current > 1" @click="prePage"
                class="flex items-center justify-center px-3 h-8 me-3 text-xs font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                  viewBox="0 0 14 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M13 5H1m0 0 4 4M1 5l4-4" />
                </svg>
              </a>

              <a v-if="current < pages" @click="nextPage"
                class="flex ml-auto items-center justify-center px-3 h-8 text-xs font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                  viewBox="0 0 14 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M1 5h12m0 0L9 1m4 4L9 9" />
                </svg>
              </a>
            </div>
          </div>
          <!-- 空 -->
          <div v-else class="mx-auto w-[160px]">
            <svg class="size-40" node-id="1" sillyvg="true" template-height="144" template-width="144" version="1.1"
              viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <defs node-id="24"></defs>
              <path
                d="M 108.00 121.20 L 106.50 120.90 L 105.40 120.30 L 104.20 118.30 L 104.00 104.00 L 68.20 103.80 L 65.00 102.60 L 62.40 100.50 L 60.60 97.50 L 60.00 94.00 L 60.20 88.10 L 61.20 87.00 L 62.00 86.90 L 62.80 87.00 L 63.80 88.10 L 64.00 94.00 L 64.20 95.60 L 64.80 97.00 L 67.00 99.20 L 68.40 99.80 L 70.00 100.00 L 106.80 100.20 L 107.80 101.20 L 108.00 102.00 L 108.00 117.20 L 125.20 100.20 L 135.60 99.80 L 137.00 99.20 L 138.20 98.20 L 139.20 97.00 L 139.80 95.60 L 140.00 94.00 L 140.00 62.00 L 139.80 60.40 L 139.20 59.00 L 137.00 56.80 L 135.60 56.20 L 134.00 56.00 L 104.20 56.00 L 102.80 55.40 L 102.20 54.00 L 102.80 52.60 L 104.20 52.00 L 135.80 52.20 L 139.00 53.40 L 141.60 55.50 L 143.40 58.50 L 144.00 62.00 L 144.00 94.00 L 143.80 95.80 L 142.60 99.00 L 140.50 101.60 L 137.50 103.40 L 134.00 104.00 L 126.80 104.00 L 110.80 120.00 L 109.50 120.90 L 108.00 121.20 Z"
                fill="#666666" fill-rule="nonzero" node-id="26" stroke="none" target-height="69.2" target-width="84"
                target-x="60" target-y="52" />
              <path
                d="M 130.00 68.00 L 98.00 68.00 L 97.20 67.80 L 96.20 66.80 L 96.20 65.20 L 97.20 64.20 L 130.00 64.00 L 131.40 64.60 L 132.00 66.00 L 131.40 67.40 L 130.00 68.00 Z"
                fill="#999999" fill-rule="nonzero" node-id="28" stroke="none" target-height="4" target-width="35.800003"
                target-x="96.2" target-y="64" />
              <path
                d="M 130.00 80.00 L 86.00 80.00 L 85.20 79.80 L 84.20 78.80 L 84.20 77.20 L 85.20 76.20 L 130.00 76.00 L 131.40 76.60 L 132.00 78.00 L 131.40 79.40 L 130.00 80.00 Z"
                fill="#999999" fill-rule="nonzero" node-id="30" stroke="none" target-height="4" target-width="47.800003"
                target-x="84.2" target-y="76" />
              <path
                d="M 98.00 92.00 L 74.00 92.00 L 73.20 91.80 L 72.20 90.80 L 72.20 89.20 L 73.20 88.20 L 98.00 88.00 L 99.40 88.60 L 100.00 90.00 L 99.40 91.40 L 98.00 92.00 Z"
                fill="#999999" fill-rule="nonzero" node-id="32" stroke="none" target-height="4" target-width="27.800003"
                target-x="72.2" target-y="88" />
              <path
                d="M 6.00 136.00 L 2.00 136.00 L 0.60 135.40 L 0.00 134.00 L 0.20 133.20 L 1.20 132.20 L 2.00 132.00 L 6.00 132.00 L 7.40 132.60 L 8.00 134.00 L 7.80 134.80 L 6.80 135.80 L 6.00 136.00 Z"
                fill="#cccccc" fill-rule="nonzero" node-id="34" stroke="none" target-height="4" target-width="8"
                target-x="0" target-y="132" />
              <path
                d="M 142.00 136.00 L 14.00 136.00 L 13.20 135.80 L 12.20 134.80 L 12.20 133.20 L 13.20 132.20 L 142.00 132.00 L 143.40 132.60 L 144.00 134.00 L 143.40 135.40 L 142.00 136.00 Z"
                fill="#cccccc" fill-rule="nonzero" node-id="36" stroke="none" target-height="4" target-width="131.8"
                target-x="12.2" target-y="132" />
              <path
                d="M 102.00 144.00 L 22.00 144.00 L 21.20 143.80 L 20.20 142.80 L 20.20 141.20 L 21.20 140.20 L 102.00 140.00 L 103.40 140.60 L 104.00 142.00 L 103.40 143.40 L 102.00 144.00 Z"
                fill="#cccccc" fill-rule="nonzero" node-id="38" stroke="none" target-height="4" target-width="83.8"
                target-x="20.2" target-y="140" />
              <path
                d="M 122.00 144.00 L 109.20 143.80 L 108.20 142.80 L 108.20 141.20 L 109.20 140.20 L 110.00 140.00 L 122.80 140.20 L 123.80 141.20 L 123.80 142.80 L 122.80 143.80 L 122.00 144.00 Z"
                fill="#cccccc" fill-rule="nonzero" node-id="40" stroke="none" target-height="4" target-width="15.600006"
                target-x="108.2" target-y="140" />
              <path
                d="M 142.60 2.70 L 141.50 2.50 L 141.30 0.90 L 140.70 0.20 L 139.70 0.00 L 138.80 0.80 L 138.50 2.50 L 136.90 2.70 L 136.20 3.30 L 136.00 4.30 L 136.30 4.90 L 136.80 5.20 L 138.50 5.50 L 138.70 7.10 L 139.80 8.00 L 140.90 7.70 L 141.20 7.20 L 141.50 5.50 L 143.20 5.20 L 144.00 4.30 L 143.80 3.30 L 142.60 2.70 Z"
                fill="#cccccc" fill-rule="nonzero" node-id="42" stroke="none" target-height="8" target-width="8"
                target-x="136" target-y="0" />
              <path
                d="M 138.60 110.70 L 137.50 110.50 L 137.30 108.90 L 136.70 108.20 L 135.70 108.00 L 134.80 108.80 L 134.50 110.50 L 132.90 110.70 L 132.20 111.30 L 132.00 112.30 L 132.30 112.90 L 134.50 113.50 L 134.70 115.10 L 135.80 116.00 L 136.30 116.00 L 137.20 115.20 L 137.50 113.50 L 139.70 112.90 L 140.00 112.30 L 139.80 111.30 L 138.60 110.70 Z"
                fill="#cccccc" fill-rule="nonzero" node-id="44" stroke="none" target-height="8" target-width="8"
                target-x="132" target-y="108" />
              <path
                d="M 61.90 120.00 L 60.30 119.70 L 59.90 117.40 L 59.00 116.30 L 57.50 116.00 L 56.20 117.10 L 55.70 119.70 L 53.40 120.10 L 52.30 121.00 L 52.00 122.50 L 52.50 123.30 L 53.10 123.80 L 55.70 124.30 L 56.10 126.60 L 57.00 127.70 L 57.70 128.00 L 58.50 128.00 L 59.80 126.90 L 60.30 124.30 L 62.90 123.80 L 64.00 122.50 L 63.70 121.00 L 62.60 120.10 L 61.90 120.00 Z"
                fill="#cccccc" fill-rule="nonzero" node-id="46" stroke="none" target-height="12" target-width="12"
                target-x="52" target-y="116" />
              <path
                d="M 17.00 111.00 L 15.60 110.40 L 15.00 109.00 L 15.00 95.00 L 15.60 93.60 L 17.00 93.00 L 18.40 93.60 L 19.00 95.00 L 19.00 109.00 L 18.40 110.40 L 17.00 111.00 Z"
                fill="#cccccc" fill-rule="nonzero" node-id="48" stroke="none" target-height="18" target-width="4"
                target-x="15" target-y="93" />
              <path
                d="M 19.50 115.50 L 18.80 117.30 L 17.00 118.00 L 15.20 117.30 L 14.50 115.50 L 15.20 113.70 L 17.00 113.00 L 18.80 113.70 L 19.50 115.50 Z"
                fill="#cccccc" fill-rule="nonzero" node-id="50" stroke="none" target-height="5" target-width="5"
                target-x="14.5" target-y="113" />
              <path
                d="M 118.00 38.00 L 117.20 37.80 L 116.20 36.80 L 116.20 34.20 L 116.60 32.50 L 118.40 29.40 L 122.50 25.90 L 123.50 24.40 L 124.00 22.70 L 123.90 20.80 L 123.40 19.30 L 122.60 18.10 L 120.30 16.40 L 117.40 16.00 L 115.90 16.40 L 113.50 18.00 L 112.20 20.50 L 111.80 22.80 L 110.80 23.80 L 109.20 23.80 L 108.20 22.80 L 108.00 22.00 L 108.30 19.60 L 109.10 17.50 L 110.30 15.60 L 112.00 14.00 L 113.90 12.90 L 116.20 12.20 L 118.60 12.00 L 120.80 12.40 L 122.90 13.30 L 124.80 14.60 L 126.30 16.40 L 127.40 18.50 L 127.90 20.80 L 127.90 23.10 L 127.40 25.30 L 126.50 27.30 L 125.00 29.10 L 121.80 31.60 L 120.90 32.90 L 120.20 34.40 L 119.80 36.80 L 118.80 37.80 L 118.00 38.00 Z"
                fill="#cccccc" fill-rule="nonzero" node-id="52" stroke="none" target-height="26"
                target-width="19.900002" target-x="108" target-y="12" />
              <path
                d="M 120.50 42.50 L 120.30 43.50 L 119.00 44.80 L 117.00 44.80 L 115.70 43.50 L 115.70 41.50 L 117.00 40.20 L 119.00 40.20 L 120.30 41.50 L 120.50 42.50 Z"
                fill="#cccccc" fill-rule="nonzero" node-id="54" stroke="none" target-height="4.5999985"
                target-width="4.800003" target-x="115.7" target-y="40.2" />
              <path
                d="M 44.00 99.80 L 42.50 99.50 L 41.20 98.60 L 11.40 68.80 L 8.20 65.10 L 6.10 62.10 L 2.80 55.80 L 0.70 49.10 L 0.00 42.00 L 0.30 37.70 L 1.00 33.50 L 2.20 29.50 L 3.90 25.70 L 6.00 22.00 L 8.50 18.60 L 11.40 15.30 L 14.70 12.30 L 18.20 9.60 L 22.00 7.20 L 26.10 5.10 L 30.60 3.30 L 35.10 1.90 L 39.80 0.90 L 44.80 0.20 L 50.00 0.00 L 55.20 0.20 L 60.20 0.90 L 64.90 1.90 L 69.40 3.30 L 73.90 5.10 L 78.00 7.20 L 81.80 9.60 L 85.30 12.30 L 88.60 15.30 L 91.50 18.60 L 94.00 22.00 L 96.10 25.70 L 97.80 29.50 L 99.00 33.50 L 99.70 37.70 L 100.00 42.00 L 99.70 46.30 L 99.00 50.50 L 97.80 54.50 L 96.10 58.30 L 94.00 62.00 L 91.50 65.40 L 88.60 68.70 L 85.30 71.70 L 81.80 74.40 L 78.00 76.80 L 73.90 78.90 L 69.40 80.70 L 64.90 82.10 L 60.20 83.10 L 55.20 83.80 L 48.00 84.00 L 48.00 95.80 L 47.70 97.30 L 46.80 98.60 L 45.60 99.50 L 44.00 99.80 Z M 14.30 66.10 L 44.00 95.80 L 44.00 81.90 L 44.60 80.40 L 46.10 79.90 L 54.80 79.80 L 59.30 79.20 L 63.70 78.30 L 72.00 75.40 L 75.80 73.50 L 82.50 68.90 L 85.50 66.10 L 90.40 60.10 L 92.40 56.80 L 93.90 53.30 L 95.10 49.70 L 95.70 45.90 L 96.00 42.00 L 95.70 38.10 L 95.10 34.30 L 93.90 30.70 L 92.40 27.20 L 88.20 20.80 L 82.50 15.10 L 75.80 10.50 L 67.90 7.00 L 59.30 4.80 L 50.00 4.00 L 40.70 4.80 L 32.10 7.00 L 24.20 10.50 L 17.50 15.10 L 11.80 20.80 L 7.60 27.20 L 6.10 30.70 L 4.90 34.30 L 4.30 38.10 L 4.00 42.00 L 4.20 45.20 L 5.40 51.30 L 7.80 57.20 L 9.40 59.90 L 13.70 65.30 Z"
                fill="#666666" fill-rule="nonzero" node-id="56" stroke="none" target-height="99.8" target-width="100"
                target-x="0" target-y="0" />
              <path
                d="M 32.00 52.00 L 30.60 51.40 L 30.00 50.00 L 30.00 34.00 L 30.60 32.60 L 32.00 32.00 L 33.40 32.60 L 34.00 34.00 L 34.00 50.00 L 33.40 51.40 L 32.00 52.00 Z"
                fill="#999999" fill-rule="nonzero" node-id="58" stroke="none" target-height="20" target-width="4"
                target-x="30" target-y="32" />
              <path
                d="M 68.00 52.00 L 66.60 51.40 L 66.00 50.00 L 66.00 34.00 L 66.20 33.20 L 67.20 32.20 L 68.80 32.20 L 69.80 33.20 L 70.00 34.00 L 70.00 50.00 L 69.40 51.40 L 68.00 52.00 Z"
                fill="#999999" fill-rule="nonzero" node-id="60" stroke="none" target-height="19.8" target-width="4"
                target-x="66" target-y="32.2" />
            </svg>
            <p class="mt-2 text-gray-400 text-center">什么都没有呀</p>
          </div>
        </div>
        <!-- Modal footer -->
        <div class="p-4 md:p-5 border-t text-xs flex items-center text-gray-400">
          <!-- Esc 退出提示 -->
          <span class="px-2 py-[1px] flex-none border rounded">Esc</span>
          <span class="text-gray-400 ml-2">关闭</span>

          <!-- 底层技术介绍 -->
          <span class="ml-auto blog-font-cute">基于 <a href="https://lucene.apache.org/" target="_blank"
              class="underline">Apache
              Lucene</a> 全文检索引擎开发</span>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { onMounted, ref, defineExpose, watch } from 'vue'
import { initCollapses, Drawer, initDropdowns } from 'flowbite'
import IndexSearch from '@/components/IndexSearch.vue'
import { useUserStore } from '@/stores/user';
import { useBlogSettingsStore } from '@/stores/blogsettings';
import router from '@/router';
import { showConfirm, showMessage } from '@/composables/utils';
import { getArticlePageList } from '@/api/frontend/search';

// TODO 自定义首页登出框


// 初始化 flowbit 相关组件
onMounted(() => {
  initCollapses();
  initDropdowns();
  initModals()
  // 初始化
  const $modalElement = document.querySelector("#search-modal")
  searchModal.value = new Modal($modalElement, modalOptions, instanceOptions)
})
//========================博客设置========================
const blogSettingsStore = useBlogSettingsStore()


//========================判断用户是否登录========================
const userStore = useUserStore()
const keys = Object.keys(userStore.userInfo)    // 获取对象的所有键的属性值(数组)
const isLogin = ref(keys.length > 0)  //判断是否登录
//========================用户登出========================
const logOut = () => {
  showConfirm('确定要退出登录吗').then(() => {
    userStore.logout()
    isLogin.value = false
    showMessage('退出登录成功！')
    // 刷新页面
    location.reload()
  }).catch(() => { })
}




// Drawer
const direction = ref('ltr')
const drawer = ref(false)
// log下拉框
const logInOut = ref(false)
const dropdownLog = ref(null)
const showToLog = () => {
  logInOut.value = true
}
const hideToLog = () => {
  logInOut.value = false
}


// =======================HANDLE_EXPAND=====================
//========================search========================
// 初始化 flowbit 相关组件
const searchModal = ref(null)
const modalOptions = {
  placement: 'top-center', // 弹框位置
  backdrop: 'dynamic',
  backdropClasses:
    'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
  closable: true,
  onHide: () => {
    // console.log('modal is hidden');
  },
  onShow: () => {
    // console.log('modal is shown');
  },
  onToggle: () => {
    // console.log('modal has been toggled');
  },
}
// instance options object
const instanceOptions = {
  id: 'searchModalEl',
  override: true
}

//=====================搜索框=======================
const searchInput = ref(null)
//搜索参数 + 结果
const searchArticles = ref([])  //搜索结果
const current = ref(1)
const total = ref(0)
const size = ref(5) //每页数据量, 默认5
const pages = ref(0)  //总页数
const searchWord = ref('')  //搜索关键字

const handleExpand = (svalue) => {
  // 显示搜索弹框
  searchModal.value.show()
  searchWord.value = svalue
  searchInput.value.focus()   //弹出框中搜索框聚焦
}
let timeoutId;
watch(searchWord, (newText, oldText) => {
  searchLoading.value = true
  clearTimeout(timeoutId)
  timeoutId = setTimeout(() => {
    if (newText && newText !== oldText) {   // 若搜索关键字不为空, 且和之前的值不同
      renderSearchArticles({
        current: current.value,
        size: size.value,
        word: newText
      })
    } else if (newText == '') {
      searchArticles.value = []
    }
    searchLoading.value = false
  }, 1200)
})

const searchLoading = ref(false)
const renderSearchArticles = (data) => {
  getArticlePageList(data).then(res => {
    console.log(res)
    if (res.success) {
      searchArticles.value = res.data
      current.value = res.current
      total.value = res.total
      size.value = res.size
      pages.value = res.pages
    }
  })
}

// 渲染下一页搜索结果
const nextPage = () => {
  renderSearchArticles({ current: current.value + 1, size: size.value, word: searchWord.value })
}

// 渲染上一页搜索结果
const prePage = () => {
  renderSearchArticles({ current: current.value - 1, size: size.value, word: searchWord.value })
}



const goArticleDetailPage = (id) => {
  searchModal.value.hide()
  router.push(`/article/${id}`)
}











</script>

<style scoped>
.expand-button:focus-visible {
  outline: none;
}

#search-modal {
  align-items: baseline;
}

.transition-transform {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 300ms;
}

.header::after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #2e262633;
  position: relative;
  left: 0;
  bottom: 0;
}

.expand-icon {
  outline: none;
}


.side-ul>li {
  margin-top: 0 !important;
}

.showLog {
  opacity: 1;
  visibility: visible;
}
</style>